<template>
  <div class="md-show">
    <markdown-it-vue 
      class="md-body" 
      :content="value || ''" 
      :options="markdownOptions" 
    />
  </div>
</template>

<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'

export default {
  name: 'MdShow',
  components: {
    MarkdownItVue
  },
  props: {
    /**
     * Markdown内容
     */
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      /**
       * markdown-it-vue配置选项
       */
      markdownOptions: {
        markdownIt: {
          linkify: true,
          breaks: true,
          html: true
        },
        linkAttributes: {
          attrs: {
            target: '_blank',
            rel: 'noopener'
          }
        },
        katex: {
          throwOnError: false,
          errorColor: '#cc0000'
        },
        image: {
          hAlign: 'left',
          viewer: true
        }
      }
    }
  }
};
</script>

<style scoped>
.md-show {
  line-height: 1.6;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 自定义样式覆盖 */
.md-show >>> .md-body {
  font-size: 14px;
}

/* 代码块样式优化 */
.md-show >>> pre {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
}

/* 链接样式 */
.md-show >>> a {
  color: #3498db;
  text-decoration: none;
}

.md-show >>> a:hover {
  text-decoration: underline;
}

/* 图片样式 */
.md-show >>> img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 1em 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .md-show >>> .md-body {
    font-size: 12px;
  }
}
</style>